<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="referrer" content="no-referrer" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<!-- 导入样式表 -->
		<link rel="stylesheet" href="./assets/news.css" />
	</head>

	<body>
		<!-- 新闻列表 -->
		<div id="news-list">
			<!-- 新闻的 item 项 -->
			<div class="news-item">
				<img class="thumb" src="https://a.zdmimg.com/202207/18/62d50d53848d77366.jpg_c350.jpg" alt="" />
				<div class="right-box">
					<!-- 新闻标题 -->
					<h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
					<div class="footer">
						<div>
							<img src="https://avatarimg.smzdm.com/default/4595480055/5d15aca1a4fae-small.jpg" alt="" />
							<!-- 新闻来源 -->
							<span>胡润百富</span>&nbsp;&nbsp;

							<!-- 发布日期 -->
							<span>2019-10-28 10:14:38</span>
						</div>
						<!-- 评论数量 -->
						<span>评论数：66</span>
					</div>
				</div>
			</div>
		</div>
		<script src="../node_modules/axios/dist/axios.min.js"></script>
		<script>
			async function getNews() {
				const res = await axios({
					url: 'http://192.168.36.32:8848/api/news',
				});
				const news = res.data;
				// console.log(news);
				document.querySelector('#news-list').innerHTML = news
					.map(({ avatar, title, pic_url, nickname, publish_time, comment_count }) => {
						return `
            <div class="news-item">
              <img class="thumb" src="${avatar}" alt="" />
              <div class="right-box">
                <!-- 新闻标题 -->
                <h1 class="title">${title}</h1>
                <div class="footer">
                  <div>
                    <img src="${pic_url}" alt="" />
                    <!-- 新闻来源 -->
                    <span>${nickname}</span>&nbsp;&nbsp;

                    <!-- 发布日期 -->
                    <span>${publish_time}</span>
                  </div>
                  <!-- 评论数量 -->
                  <span>评论数：${comment_count}</span>
                </div>
              </div>
            </div>
          `;
					})
					.join('');
			}
			getNews();
		</script>
	</body>
</html>
